<template>
  <div class='deptManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3 class="">员工名册<small class="sub-title">{{searchDeptCategory}}</small></h3>
        </div>
        <search-box @getValue="getSearchText" :text="text"></search-box>
      </el-row>
      <el-row class="second-sec">
          <div class="display-title">
            <el-radio-group v-model="radio3" @change="handleRadioChange" fill="#449d44" text-color="#fff">
              <el-radio-button label="员工名片">员工名片</el-radio-button>
              <el-radio-button label="员工列表" >员工列表</el-radio-button>
            </el-radio-group>
            <div class="rt select-dept">
               <span>请选择部门：</span>
               <el-select  v-model="leaderSec" @change="getLeaderSecList" placeholder="请选择">
                  <el-option
                  v-for="item in unitList"
                  :key="item.deptid"
                  :label="item.descr"
                  :value="item.descr">
                  </el-option>
               </el-select>
            </div> 
          </div>
          <!--<div class="switch-btn">
            <el-switch
                v-model="value1"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="work"
                off-value="off-work"
                @change="selectWork"
            >
            </el-switch>正职
            <el-switch
                v-model="value2"
                on-text=""
                off-text=""
                on-color="#449d44"                
                on-value="leader-work"
                off-value="off-leader-work"
                @change="selectLeaderWork"
                >
            </el-switch>退居二线
            <el-switch
                v-model="value3"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="retire"
                off-value="off-retire"
                @change="selectRetire"
                >
            </el-switch>内部退养
          </div>-->

      </el-row>

      <el-row class="third-card">
          <div class="totalNum">
              &nbsp;
              <div class="rt">共计<strong>{{totalNum}}</strong>人</div>
          </div>
          <div class="containerCard"  v-show="showCard">
             
                <div class="unitContainer" v-bind:style="{borderTopColor : 'blue'}" >
                    <!--<div class="collapse-card" >
                        <h3 class="box-title">
                            {{unit.c_lea_unit_name}}（共{{unit.num}}人）
                        </h3>
                        <div class="collapse-container pull-right">
                            <a v-if="unit.show" class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-minus"></i></a>
                            <a v-else class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-plus"></i></a>
                        </div>
                        
                    </div>-->
                    <transition name="slide-fade">
                      <div class="card-body">
                        <card-leader v-for='item in cardList' :personInfo='item'></card-leader>
                      </div>
                    </transition>

                </div>   
            
       
          </div>


          

          <div class="table-container" v-show="showTable">
            <div class="collapse-card">
                <h3 class="box-title">
                    员工列表（共{{totalNum}}人）
                </h3>
                <div class="collapse-container pull-right">
                    <a class="collapse" @click="collpseCard" data-widget="collapse"><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="handle-table">
               <a :href="downloadTable" class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出简表</a>
               <div class="rt selectSet">
                  <!--<a href="" class="default alt" title="切换"><i class="fa fa-list-alt" aria-hidden="true"></i></a>-->
                  <a @click="showColList" class="default" title="自定义列"><i class="fa fa-th" aria-hidden="true"></i><span class="caret"></span></a>
                  <search-col :ifShow.sync='colShow' :checkedCities.sync="checkedCities" :cities="colTotalList" @changeCol="getCheckedArr"></search-col>
               </div>
            </div>

            <el-table
                :data="unitTableList"
                style="width: 100%"
                :fit="tablefit"
                :row-class-name="handleRowClass"
                >
                <el-table-column :prop="item.prop" :class-name="item.class" :label="item.label" :min-width="item.width" width="80" :key="item.prop" v-if="item.isShow" v-for='item in tableOption'>
                    <template  scope="scope">
                      <a v-if="item.needAtag && scope.row['personnel']" target="_blank" class="resumePeo"  @click="targetLeaderRoute(scope)">{{scope.row.name}}</a>
                      <span v-else>{{handleData(scope,item)}}</span>
                    </template>
                </el-table-column>          
            </el-table>

          <div class="block">
            <span class="displayShow">显示第 <span v-if="totalNum">{{1+(currentPage-1)*pageSizeTable}}</span><span v-else>0</span> 到第 {{(currentPage-1)*pageSizeTable + totalTableNum}} 条记录，总共 {{totalNum}} 条记录</span>
            <el-pagination
              
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              
              :page-size.sync="pageSizeTable"
              layout="prev, pager, next"
              :total="totalNum">
              
            </el-pagination>
          </div>
        </div>
      </el-row>
  </div>
</template>

<script>
//   import 'Mock/mock_data'
import Vue from 'vue'
import { ButtonGroup, Switch, Select, Input, Col, Row, Radio, RadioGroup, RadioButton, Option, Table, TableColumn, Form, FormItem, Pagination } from 'element-ui'
Vue.use(ButtonGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Pagination)

import { _encode } from '@/common/js/handleCode'
import cardLeader from '@/components/public/card-memeber'
import searchBox from '@/components/public/search-box'
import searchCol from '@/components/public/selectShowCol'
export default {
	data () {
		return {
			value1: null,
			value2: null,
			value3: null,
			radio3: '员工名片',
			unitList: [],
			leaderSec: '',
			loading: false,
			text: '请输入姓名、员工编号搜索',
			searchRecord: null,
			searchText: '',
			searchDeptCategory: '',
			deptDescr: null,
			isLoadEnd: false,
			//   arrColor:[{color:'red'}],
			//   unitContainer:null,
			checkedCities: [0, 1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
			colShow: false,
			cardList: [],
			showCard: true,
			totalNum: null,
			showTable: false,
			tablefit: true,
			englishTitle: null,
			title: null,
			tableOption: null,
			colTotalList: null,
			currentPage: 1,
			pageSizeTable: 30,
			totalTableNum: null,
			unitTableList: null,
			isFirstTime: true,

			cardPageSize: 30,
			cardPageNum: 1,

			firstTimeToLoad: false,
		}
	},
	methods: {
		handle: function (scope) {
			var emplid = scope.row.emplid
			this.$router.push('/resume?emplid=' + emplid)
		},
		targetLeaderRoute (scope) {

			let sex = scope.row.sex_descr === '女' ? 2 : 1
			const params = {
				emplid: scope.row.emplid,
				resumeType: 2,
				sex
			}

			window.open('/module/resume.html?' + _encode(JSON.stringify(params)))

		},
		clearData: function () {
			// this.searchRecord = false;
			this.cardList = []
			this.unitTableList = []
			this.cardPageNum = 1
			this.currentPage = 1
			this.isLoadEnd = false

		},
		selectAjax: function () {
			if (this.radio3 === '员工名片') {
				if (this.searchRecord) {
					var params = {
						search: this.searchText,
						pageSize: 1000,
						pageNum: this.cardPageNum
					}
					this.PostAjax(this.URL.employeeSearch.url, params, 3)
				} else {
					this.getLeaderListCommonAjax()
				}
			} else if (this.radio3 === '员工列表') {
				if (this.searchRecord) {
					var params = {
						search: this.searchText,
						pageSize: this.pageSizeTable,
						pageNum: this.currentPage
					}
					this.PostAjax(this.URL.employeeSearch.url, params, 3)
				} else {
					this.getLeaderListCommonAjax(2)
				}
			}

		},
		getSearchText: function (text) {
			var self = this
			if (!text.trim()) {
				//   this.cardList = [];
				//   this.totalNum = 0;
				//   this.cardPageNum = 1;
				this.clearData()
				this.searchRecord = false
				this.selectAjax()
				return
			}
			this.searchText = text
			this.cardPageNum = 1
			this.searchRecord = true
			this.selectAjax()
			//   var params = {
			//       search:this.searchText,
			//       pageSize:10,
			//       pageNum:this.currentPage
			//   }
			//   this.PostAjax(this.URL.employeeSearch.url,params,3);
		},
		handleRowClass: function (row, index) {
			return index % 2 === 0 ? 'even-row' : 'odd-row'
		},
		dataNeedFunc: function (prop) {

			return prop === 'service_dt' || prop === 'birtc_cur_job_dthdate' || prop === 'birthdate' || prop === 'start_dt_chn'
		},
		handleData: function (scope, item) {
			var prop = item.prop
			switch (true) {
			case prop === 'num':
				return (this.currentPage - 1) * this.pageSizeTable + scope.$index + 1
				break
			case this.dataNeedFunc(prop):

				var value = scope.row[item.prop].split(' ')[0]
				return value
				break
			default:

				return scope.row[item.prop]
			}

		},
		getCheckedArr: function (value) {
			var arr = []
			value = JSON.parse(JSON.stringify(value))
			value.sort(function (a, b) {
				return a - b
			})
			for (var i = 0, len = value.length; i < len; i++) {
				arr.push(this.colTotalList[value[i]])
			}

			this.tableOption = JSON.parse(JSON.stringify(arr))
			this.assignTitles()

		},
		concatStr: function (data) {
			let ret = ''
			for (let it in data) {
				ret += it + '=' + data[it] + '&'
			}
			return ret
		},
		assignTitles: function () {
			var title = '', englishTitle = ''
			// 	if (this.tableOption[0].prop !== "num") {
			// 	 title += "序号";
			// }
			for (var j = 0; j < this.tableOption.length; j++) {
				title = title ? title + ',' + this.tableOption[j].label : title + this.tableOption[j].label
				if (this.tableOption[j].prop !== 'num') {
					englishTitle = englishTitle ? englishTitle = englishTitle + ',' + this.tableOption[j].prop : englishTitle + this.tableOption[j].prop
				}

			}
			this.title = title
			console.log(this.title, 'this.title')
			this.englishTitle = englishTitle
			console.log(this.englishTitle, 'this.englishTitle')

		},
		handleRadioChange: function (value) {
			this.clearData()
			if (value === '员工列表') {
				this.showCard = false
				this.showTable = true
				this.selectAjax()
				//   this.getLeaderListCommonAjax(2);
			} else if (value === '员工名片') {
				this.showCard = true
				this.showTable = false
				this.selectAjax()
				//   this.getLeaderListCommonAjax();
			}
		},
		showColList: function () {
			this.colShow = this.colShow ? false : true
		},
		getLeaderSecList: function (value) {
			var self = this

			this.clearData()

			var type = '4'
			//   if (value) { type="1";}   
			this.getLeaderListCommonAjax(type)
		},
		collpseCard: function (unit) {
			unit.show = unit.show ? false : true
		},
		getLeaderListCommonAjax: function (type, firstTime) {
			var self = this
			var params = type === 2 ?
				{
					employeeId: '',
					deptCategory: this.searchDeptCategory,
					deptDescr: this.leaderSec,
					name: this.searchText,
					pageSize: this.pageSizeTable,
					pageNum: this.currentPage
				}
				:
				{
					employeeId: '',
					deptCategory: this.searchDeptCategory,
					deptDescr: this.leaderSec === '全部' ? '' : this.leaderSec,
					name: this.searchText,
					pageSize: this.cardPageSize,
					pageNum: this.cardPageNum
				}
			this.PostAjax(this.URL.getEmpListByService.url, params, type, firstTime)
		},
		PostAjax: function (url, params, type, firstTime) {
			var self = this
			if (type === 3) {
				this.searchRecord = true
			} else {
				this.searchRecord = false
			}
			this.Axios.Post(url, params).then(function (res) {

				//获取部门列表

				if (firstTime) {
					self.firstTimeToLoad = false
				}

				if (self.isFirstTime) {
					var arr = res.data.datas.deptlist
					arr && arr.unshift({ 'descr': '全部', 'total': 1, 'deptid': '' })
					self.unitList = arr
					self.isFirstTime = false
				}


				//获取人员列表
				self.totalNum = (res.data.page && res.data.page.total) || res.data.total || 0

				var arr1 = JSON.parse(JSON.stringify(res.data.datas.emplist))
				if (type === 2 || self.radio3 !== '员工名片') {

					self.unitTableList = JSON.parse(JSON.stringify(arr1))
					self.totalTableNum = self.unitTableList.length
				} else {
					if (self.searchRecord) {
						self.cardList = arr1
					} else {
						if (type === '4') {
							self.cardList = arr1
						} else {
							self.cardList = self.cardList.concat(arr1)
							if (self.cardList.length === self.totalNum) {
								self.isLoadEnd = true
							}
						}

					}

				}
			})
		},
		// type===2 代表简表请求
		handleSizeChange (val) {
			this.pageSizeTable = val
			this.selectAjax()
			// this.getLeaderListCommonAjax(2);            
		},
		handleCurrentChange (val) {
			// console.log(this.currentPage);
			this.currentPage = val
			this.selectAjax()
			// this.getLeaderListCommonAjax(2); 
		},
		scrollFunc: function (event) {
			var self = this
			if (this.radio3 !== '员工名片' || this.searchRecord || this.isLoadEnd) {
				return
			}

			if (this.firstTimeToLoad) {
				return
			}

			var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
			if (document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0) {
				self.cardPageNum++
				self.selectAjax()
				// self.getLeaderListCommonAjax();
			}
		}
	},
	computed: {
		downloadTable: function () {
			var params = {
				deptCategory: encodeURIComponent(this.searchDeptCategory),
				name: encodeURIComponent(this.searchText),
				token: localStorage.getItem('token'),
				deptDescr: encodeURIComponent(this.leaderSec),
				title: encodeURIComponent(this.title),
				englishTitle: encodeURIComponent(this.englishTitle),
			}
			return this.Axios.baseURI + '/excel/departmentExport?' + this.concatStr(params)
		}
	},
	created: function () {
		var self = this
		self.colTotalList = [
			{ label: '序号', prop: 'num', isShow: true, width: '', needAtag: false },
			{ label: '单位', prop: 'business_descr', isShow: true, width: '', needAtag: false },
			{ label: 'ID', prop: 'emplid', isShow: true, notChecked: true, width: '', needAtag: false },
			{ label: '姓名', prop: 'name', isShow: true, handle: true, needAtag: true },
			{ label: '性别', prop: 'sex_descr', isShow: true, class: 'width40' },
			{ label: '部门', prop: 'dept_descr', isShow: true },
			{ label: '职务', prop: 'c_current_job', isShow: true },
			{ label: '入职时间', prop: 'service_dt', isShow: true, class: 'width90', handle: true },
			{ label: '任现职时间', prop: 'c_cur_job_dt', isShow: true, class: 'width90', handle: true },
			{ label: '出生年月', prop: 'birthdate', isShow: true, class: 'width90', handle: true },
			{ label: '政治面貌', prop: 'political_sta_chn', isShow: true },
			{ label: '参加工作时间', prop: 'start_dt_chn', isShow: true, class: 'width90', handle: true },
			{ label: '最高学历', prop: 'highest_edu', isShow: true },
			{ label: '最高学位', prop: 'highest_deg', isShow: true },
			{ label: '毕业院校', prop: 'school_descr', isShow: true },
			{ label: '所学专业', prop: 'major_descr', isShow: true }
		]
		self.tableOption = JSON.parse(JSON.stringify(self.colTotalList))
		self.assignTitles()
	},
	mounted: function () {
		var self = this
		this.searchDeptCategory = this.$route.query.q
		var params = {
			employeeId: '',
			deptCategory: this.searchDeptCategory,
			deptDescr: this.leaderSec,
			name: this.searchText,
			page: {
				pageSize: 24,
				pageNum: 1
			}
		}

		this.getLeaderListCommonAjax()
		//      this.Axios.Post(this.URL.getDeptListByType.url,params).then(function(res){
		//          console.log(res,"unitList")
		//          var arr = res.data.datas;
		//          arr && arr.unshift({"descr":"全部","total":1,"deptid":""})
		//          self.unitList = res.data.datas;
		//      })


		// document.body.addEventListener("scroll",function(){
		//     if(this.scrollHeight-this.scrollTop===this.clientHeight){
		//         console.log(this.scrollHeight,this.scrollTop,this.clientHeight);
		//     }
		//     console.log(this.scrollHeight,this.scrollTop,this.clientHeight);
		// })
		window.addEventListener('scroll', this.scrollFunc)
	},
	beforeDestroy: function () {
		window.removeEventListener('scroll', this.scrollFunc)
	},
	components: {
		cardLeader,
		searchBox,
		searchCol

	},
	watch: {
		$route: {
			handler: function (val, oldVal) {
				this.searchDeptCategory = this.$route.query.q
				this.firstTimeToLoad = true
				var self = this
				this.searchText = ''
				this.leaderSec = ''
				this.radio3 = '员工名片'
				this.clearData()
				this.cardPageSize = 30
				this.cardPageNum = 1
				this.currentPage = 1
				this.pageSizeTable = 30
				this.cardList = []
				this.unitTableList = null
				var params = {
					employeeId: '',
					deptCategory: this.searchDeptCategory,
					deptDescr: this.leaderSec,
					name: this.searchText,

				}
				this.isFirstTime = true
				// if(this.searchDeptCategory === 'B'){this.isHide = true;} else if (this.searchDeptCategory === 'A') {this.isHide = false;}
				this.getLeaderListCommonAjax(1, 'first')

				this.Axios.Post(this.URL.getDeptListByType.url, params).then(function (res) {

					var arr = res.data.datas

					arr.unshift({ 'descr': '全部', 'total': 1, 'deptid': '' })
					self.unitList = res.data.datas
				})
			}
		}
	},
	filters: {
		handleBirthdate: function (value) {
			if (!value) { return }
			return value.split(' ')[0]
		},
		handleDate: function (value) {
			if (!value) { return }
			return value.split(' ')[0].replace(/-/g, function () { return '.' })
		},
		handleWorkDate: function (value) {
			if (!value) { return }
			return value.split(' ')[0].replace(/-/, function () { return '.' }).split('-')[0]
		}
	},
}

</script>

<style scoped>
.deptManage .first-title h3 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.deptManage .first-title h3 small {
  font-size: 65%;
  font-weight: normal;
  line-height: 1;
  color: #777;
  margin-left: 5px;
}
.deptManage .second-sec {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
}
.content-right {
  float: right;
  margin-top: 17px;
}
.deptManage .resumePeo {
  color: #00acd6;
  cursor: pointer;
}
.deptManage .select-dept {
  font-size: 14px;
}
.deptManage .display-title {
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
}
.deptManage .switch-btn {
  padding: 10px 10px;
}
.deptManage .collapse-card {
  position: relative;
  padding: 10px 10px;
  border-bottom: 1px solid #f4f4f4;
}

.deptManage .table-container {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-top-color: #00a65a;
  background-color: #fff;
}
.deptManage .unitContainer {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #3c8dbc;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  clear: both;
}
.deptManage .third-card .collapse-card .box-title {
  display: inline-block;
  font-size: 18px;
  color: #444;
  font-weight: 500;
  margin: 0;
  line-height: 1;
}
.deptManage .third-card .collapse-card .collapse-container {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.deptManage .third-card .collapse-card .collapse {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0px;
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
.totalNum {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}

/*选项icon样式*/
.deptManage .handle-table {
  /*overflow: hidden;*/
  clear: both;
  padding: 20px 20px 30px 20px;
  border-bottom: 1px solid #dfe6ec;
}
.deptManage .selectSet {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  clear: both;
  position: relative;
}
.deptManage .selectSet .default {
  float: left;
  background-color: #f4f4f4;
  color: #444;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.deptManage .selectSet .alt {
  margin-right: -1px;
}
.deptManage .selectSet a:hover {
  z-index: 4;
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.deptManage .selectSet .alt {
  margin-right: -1px;
}

.selectSet .default:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.selectSet .default:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.deptManage .downloadTable {
  padding: 7px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  background-color: #00acd6;
  border-color: #269abc;
  color: #fff;
  border-radius: 3px;
  display: inline-block;
}
.deptManage .downloadTable:hover {
  background-color: #3c8dbc;
  border-color: #00acd6;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.deptManage .displayShow {
  display: inline-block;
  height: 32px;
}
.deptManage .block {
  margin: 15px 5px;
  line-height: 32px;
}
</style>
<style>
/*修改element-ui样式*/

.deptManage .el-radio-button__inner:hover {
  color: #333;
}
.deptManage .el-radio-group .el-radio-button__inner:hover {
  background-color: #e7e7e7;
}
.deptManage .el-radio-group .el-radio-button__inner {
  background-color: #f4f4f4;
}

.deptManage .el-radio-group .is-active .el-radio-button__inner:hover {
  background-color: #d4d4d4 !important;
}
.deptManage .el-table th.gutter {
  display: none;
}
.deptManage .el-table th {
  white-space: nowrap;
  background-color: #fff;
  text-align: left;
}
.deptManage .el-table__header-wrapper thead div {
  background-color: #fff;
}
.deptManage .el-table__header-wrapper thead th > div.cell {
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}
.deptManage .el-table__body-wrapper tr.el-table__row div.cell {
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}
.deptManage .el-table {
  border: none;
}
.deptManage .el-table__body-wrapper table.el-table__body {
  width: 100% !important;
  table-layout: auto;
}
.deptManage .el-table__header-wrapper .el-table__header {
  width: 100% !important;
  table-layout: auto;
}

.deptManage .el-table .cell,
.el-table th > div {
  padding-left: 0px;
  padding-right: 0px;
}
.deptManage .el-form--inline .el-form-item__label {
  width: 150px;
  float: none;
  display: inline-block;
}
.deptManage .el-pagination {
  display: inline-block;
}
.deptManage .el-table tr td.width90,
.deptManage .el-table tr th.width90 {
  min-width: 100px;
}
.deptManage .el-table tr td.width40,
.groupManage .el-table tr th.width40 {
  width: 40px;
}
.deptManage .el-table__empty-block {
  width: 100% !important;
}
</style>
